<!-- 物料清单提交-->
<template>
  <div class="root">
    <el-row :gutter="5">
      <el-col :span="5">
        <el-form ref="form"
                 :model="form"
                 label-width="100px"
                 style="width:600px"
                 enctype="multipart/form-data">
          <el-row>
            <el-col>
              <b><div style="margin-bottom: 20px;margin-left: 2px">物料清单文件</div></b>
              <el-form-item label="选择文件">
                <el-upload class="upload-demo"
                           :http-request="uploadFile"
                           :on-change="handleCHange"
                           :on-remove="handleremove"
                           action="http://localhost:8181/material-list/import-material-list"
                           drag
                           multiple
                           ref="upload"
                           accept=".xlsx"
                           :file-list="filelist"
                           :auto-upload="false"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--                  <el-button slot="trigger" size="small"  type="primary">选取文件</el-button>-->
                  <!--                <div slot="tip"  class="el-uplad-tip">待写入的文件路径{{address}}</div>-->
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item>
                <el-button type="success" @click="submitUpload()">上传至服务器</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <!--    v-loading="listLoading"-->

<!--    <el-table-->
<!--      :data="list"-->
<!--      element-loading-text="Loading"-->
<!--      border-->
<!--      fit-->
<!--      highlight-current-row-->
<!--    >-->
<!--      <el-table-column align="center" label="文件名" prop="date">-->
<!--        <template slot-scope="techlist">-->
<!--          <span>{{techlist.row.productId}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column align="center" label="上传时间" prop="date">-->
<!--        <template slot-scope="techlist">-->
<!--          <span>{{techlist.row.ACode}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

  </div>
</template>

<script>

  import FileSelect from '../update/FileSelect.vue';
  import axios from 'axios';
  import { parseDateFull } from '@/api/DateFor';

  export default {
    components: {FileSelect},
    data() {
      return {
        list:[],
        techlist:[],
        dataForm:{
          name: '',
          file: null
        },
        hasfile:false,
        logoList: [],
        address: '',
        checked:false,
        filelist:[],//upload的文件的数组
        fileData:'',//上传文件数据(多文件合一)
        form: {
          versionName:'',
          versionTag:'',
          name: '',
          file: null,
          color: '#ff0000'
        },
        imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [this.imgUrl]
      };
    },
    created: function() {

    },
    methods: {
      parseDate(date){
        return parseDateFull(date);
      },

      onChange(e){
        console.log(`checked"+ ${e.target.checked}`)
      },

      clickpush(){
        this.$refs.upload.submit();  //让httprequest执行,而不是去主动执行这个func
      },


      // handlechange(file,filelist){
      //   if(filelist.length ==1){
      //     this.hasfile = true;
      //   }
      //   this.form.file = file;
      // },

      handleremove(file,filelist){
        this.filelist = filelist;
      },
      //提交文件
      uploadFile(file){
        this.fileData.append('files',file.file);
      },
      //上传到服务器
      submitUpload(){
        if(this.filelist.length === 0){
          this.$message({
            message:'请先选择文件',
            type:'warning'
          })
        }else {
          const isLt100M = this.filelist.every(file => file.size / 1024 / 1024 < 100);
          if (!isLt100M) {
            this.$message.error('请检查，上传文件大小不能超过100MB!');
          }else{
            this.fileData = new FormData();
            this.$refs.upload.submit();//提交调用uploadFile函数
            let config ={
              headers:{
                'Content-Type' : 'multipart/form-data'
              },
              transformRequest:[ function(data) {
                return data;
              }]
            };
            axios.post('/material-list/import-material-list',this.fileData,config).then((res) =>{
              console.log(res);
              if (res.data.code == "20000"){
                this.openM();
                this.filelist = [];
              }else if(res.data.code == "40001"){
                this.$alert("第"+ res.data.data +"个文件出错");
              }else if(res.data.code == "40000"){
                this.$alert(res.data.data);
              }else if(res.data.code == "40003"){
                this.$alert(res.data.data);
              }else if(res.data.code == "40005"){
                this.$alert(res.data.data);
              }else {
                this.$alert(res.data.data);
              }
            })
          }
        }
      },
      handleCHange(file,fileList){
        let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
        if (existFile) {
          this.$message.error('当前文件已经存在!');
          fileList.pop();
        }
        this.filelist = fileList;
      },



      pushInvenFile(val) {
        //首先拿到地址
        if (val.file == null) {
          this.$message.warning('请先选择要上传的文件');
          return false;
        }
        //取出refs.upload中的文件
        // uploadFile = this.$refs.upload.submit();
        let formDParams = new FormData();
        formDParams.append('file', val.file);//filename是键 file是值
        let config ={
          headers:{
            'Content-Type' : 'multipart/form-data'
          },
          transformRequest:[ function(data) {
            return data;
          }]
        };
        axios.post('/material-list/import-material-list',formDParams,config).then((res) => {
          console.log(res);
          if (res.data.code == "20000"){
            // let arr = [...JSON.parse(res.data.data)];
            // debugger
            // this.list = arr;
            // console.log(arr);
            // this.techlist = this.list;
            this.openM();
          }else if(res.data.code == "40001"){
            this.$alert("第"+ res.data.data +"个文件出错");
          }else if(res.data.code == "40000"){
            this.$alert(res.data.data);
          }else if(res.data.code == "40003"){
            this.$alert(res.data.data);
          }else if(res.data.code == "40005"){
            this.$alert(res.data.data);
          }else {
            this.$alert(res.data.data);
          }
        });
        // this.$http({
        //   url:'/web/push',
        //   headers: {'Content-Type': 'multipart/form-data;boundary=10'},//定义内容格式,很重要
        //   method: 'POST',
        //   formDParams
        // }).then(function(res) {
        //   debugger
        //   console.log(res);
        // });
      },
      openM() {
        this.$alert("解析成功");
      },
      publish(){
        //请求publish接口即可
        axios.get('/web/publishcold').then( (response) =>{
          debugger
          console.log(response.data);
          if(response.data.code == "20000"){
            this.openM()
          }
        });
      },
      getfile2Path(){
        this.$http.get('/web/getversion/main')
            .then(
                response => {
                  this.info = response.data;
                  console.log(this.info.data.filePath);
                  this.address = this.info.data.filePath;
                  // let strJ = JSON.parse(this.info)
                  // this.address = strJ.filePath
                  // // console.log('address',this.address)
                  // this.$message.info(this.address)
                  // console.log(this.address)

                }
            );
      }
    }
  };
</script>

<style>
  .choose-color{
    z-index: 9999;
    /* width: 210px; */
  }
  .line {
    text-align: center;
  }
  .img-wrap {
    width: 100%;
    height: 500px;
    margin-left: 68px;
  }
  .box{
    width: 220px !important;
  }
</style>
